<template>
  <a-segmented :value="value" :options="data" @change="handleChange" />
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Modal } from 'ant-design-vue';
const data = reactive(['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']);
const value = ref(data[0]);
const confirm = () => {
  return new Promise(resolve => {
    Modal.confirm({
      title: 'Confirm',
      content: 'Are you sure you want to confirm?',
      onOk: () => {
        resolve(true);
      },
      onCancel: () => {
        resolve(false);
      },
    });
  });
};
const handleChange = v => {
  confirm().then(res => {
    if (res) {
      value.value = v;
    } else {
      console.log('reject');
    }
  });
};
</script>